<script setup lang="ts">
import {onMounted, ref} from "vue";
import {ElNotification, ElTable} from "element-plus";
import {$findHotelById, $showHotel} from "../../../api/hotelManage.ts";
import ShowDialog from "../../../components/subassembly/ShowDialog.vue";

const showData = ref([])
const showDialogRef = ref(false)

// 引用 el-table 实例
const tableRef = ref<InstanceType<typeof ElTable> | null>(null);

//加载酒店信息列表
const loadShowHotel = async () => {
  const ret = await $showHotel()
  console.log(ret.t)
  showData.value = ret.t
}
// 查看弹窗信息
const ShowHotelDialog = async (id: number) => {
  const res = await $findHotelById({id})
  if (res.code === 4001) {
    ElNotification({
      title: '失败！',
      message: '服务器异常，请联系管理员！',
      type: 'error',
    })
    return
  }
  showDialogRef.value.showDialog = true
  showDialogRef.value.showForm = res.t
}
onMounted(() => {
  loadShowHotel()
})
</script>

<template>
  <ShowDialog ref="showDialogRef"></ShowDialog>
  <el-row :gutter="18" justify="start" align="middle" style="margin-bottom: 10px">
    <el-col :span="4">
      <el-input v-model="search" size="middle" placeholder="查找酒店" />
    </el-col>
  </el-row>
  <el-table ref="tableRef" :data="showData" style="width: 100%">
    <el-table-column label="序号" prop="id" width="100"/>
    <el-table-column label="酒店名称" prop="hotelName"/>
    <el-table-column label="酒店地址" prop="hotelAddress"/>
    <el-table-column label="酒店联系人" prop="hotelContext"/>
    <el-table-column label="酒店联系人电话" prop="hotelPhone"/>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="ShowHotelDialog(scope.row.id)">详情</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped lang="scss">

</style>